<template>
  <div class="hello">
    <!--@mouseleave ="autoPlay" @mouseover="stopPlay"-->
    <div class="container" >
        <div class="wrap" style="left:0px;">
        jjj
            <!--<img v-for="(item,index) in listImg" :key="index" :src="item.img" />-->
            <div  v-for="(item,index) in listImg" >
                <bigImg :srcPath="item.img"/>
            </div>
            
        </div>
        <div class="buttons">
          <div class="buttons_box">
            <div class="buttons_main" >
              <span  v-for="(item,index) in listImg" :key="index" :class="item.isActive?'active':''" @click="slImg(index)">
                <img :src="item.img" >
              </span>
            </div>
          </div>
        </div>
        <a href="javascript:;" class="arrow arrow_left" @click="prevFun">&lt;</a>
        <a href="javascript:;" class="arrow arrow_right" @click="nextFun">&gt;</a>
    </div>
  </div>
</template>
<script>

import { setInterval, clearInterval } from 'timers';

import  bigImg  from 'urlImg';
export default {
  name: 'HelloWorld1',
  props: {
    msg: String
  },
  components: {
    bigImg
  },
  data() {
    return {
       listImg:[{
          img:require('../assets/image/nature-1.jpg')
        },{
          img:require('../assets/image/nature-2.jpg')
        },{
          img:require('../assets/image/nature-3.jpg')
        },{
          img:require('../assets/image/nature-4.jpg')
        },{
          img:require('../assets/image/nature-5.jpg')
        },{
          img:require('../assets/image/nature-6.jpg')
        },{
          img:require('../assets/image/nature-7.jpg')
        },{
          img:require('../assets/image/nature-8.jpg')
        },{
          img:require('../assets/image/nature-9.jpg')
        },{
          img:require('../assets/image/nature-10.jpg')
        },{
          img:require('../assets/image/nature-1.jpg')
        },{
          img:require('../assets/image/nature-2.jpg')
        },{
          img:require('../assets/image/nature-3.jpg')
        },{
          img:require('../assets/image/nature-4.jpg')
        }],
        index:0,
        timer:null,
    }

  },
  created(){

  },
  mounted(){
    //一上来自动播放 不要的话注释掉
    // this.autoPlay();
    //给列表增加是否选中属性
    for(var i=0; i<this.listImg.length; i++){
      this.listImg[i].isActive=false;
    }
    this.listImg[this.index].isActive=true;
    console.log(this.listImg);
  },
  methods: {
    /*
      左右切换
      缩路图点击切换
      自动播放
      鼠标移入停止播放
      鼠标移出自动播放
    */
    //下一页 600是因为宽度是600
    nextFun(){
      console.log("下一个");
      var wrap=document.querySelector(".wrap");
      this.index++;
      if (this.index > this.listImg.length-1) {
        this.index = 0;
      }
      var newLeft;
      if (wrap.style.left == "-"+((this.listImg.length-1)*600)+"px") {
          newLeft = 0;
      }else{
          newLeft = parseInt(wrap.style.left) - 600;
      }
      wrap.style.left = newLeft + "px";
      this.scrollBottom(this.index);
      this.dbClick(this.index);
    },
    //上一页
    prevFun(){
      var wrap=document.querySelector(".wrap");
      this.index--;
      if (this.index < 0) {
        this.index = this.listImg.length-1;
      }
      var newLeft;
      if (wrap.style.left === "0px") {
          newLeft = -((this.listImg.length-1)*600);
      } else {
          newLeft = parseInt(wrap.style.left) + 600;
      }
      wrap.style.left = newLeft + "px";
      this.scrollBottom(this.index);
      this.dbClick(this.index);
    },
    //点击缩路图
    slImg(index){
      this.index=index;
      var wrap=document.querySelector(".wrap");
      wrap.style.left ="-"+index*600+"px";
      this.dbClick(index);
    },
    //左右切换选中缩略图
    dbClick(index){
      for(var i=0; i<this.listImg.length; i++){
        this.listImg[i].isActive=false;
      }
      this.listImg[index].isActive=true;
    },
    //移动到第九个元素(第几个元素取决于下面缩路图一屏幕放了几个图) 缩略图开始滚动
    scrollBottom(index){
      console.log("点击了第几个"+index+1);
      var buttonsMain=document.querySelector(".buttons_main");
      if(index>=9){
        buttonsMain.style.left ="-"+Number(((index+1)-9)*60+8)+"px";
      }
      //点击下一个到头了从头开始
      if(index==0){
        buttonsMain.style.left =0+"px";
      }

    },
    //鼠标移出开始自动播放
    autoPlay(){
      // console.log("移出")
      clearInterval(this.timer)
      this.timer=setInterval(()=>{
        this.nextFun();
      },2000)
    },
    //鼠标移入停止自动播放
    stopPlay(){
      // console.log("移入")
      var _this=this;
      clearInterval(_this.timer)
    }

  }
  
}
</script>


<style scoped>
* {
  margin:0;
  padding:0;
}
a{
  text-decoration: none;
}
.container {
  position: relative;
  width: 600px;
  height: 400px;
  margin:100px auto 0 auto;
  box-shadow: 0 0 5px green;
  overflow: hidden;
}
.container .wrap {
  position: absolute;
  width: 8400px;
  height: 400px;
  z-index: 1;
}
.container .wrap img {
  float: left;
  width: 600px;
  height: 400px;
}
.container .buttons {
    position: absolute;
    /* right: 0px; */
    bottom: 0px;
    width: 600px;
    height: 80px;
    z-index: 2;
    left: 0px;
    background: red;
}
.buttons_box{
    width: 560px;
    height: 80px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.buttons_main{
    width: 860px;
    height: 80px;
    margin: 0 auto;
    position: absolute;
    background:yellow;
}
.container .buttons span {
    /* margin-left: 5px; */
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: green;
    text-align: center;
    color: white;
    cursor: pointer;
    margin:20px 10px;
}
.container .buttons span img {
    width:100%;
    height:auto;
}
.active{
  border:4px green solid;
}
.container .arrow {
  position: absolute;
  top: 35%;
  color: green;
  padding:0px 14px;
  border-radius: 50%;
  font-size: 50px;
  z-index: 2;
  display: none;
}
.container .arrow_left {
  left: 10px;
}
.container .arrow_right {
  right: 10px;
}
.container:hover .arrow {
  display: block;
}
.container .arrow:hover {
  background-color: rgba(0,0,0,0.2);
}
</style>
